<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <!-- 网站说明 -->
    <meta name="description" content="品优购-专业的综合网上购物商城,销售家电、数码通讯、电脑、
        家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物
        体验!">
    <!-- 关键词 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配
        件,手表,存储卡,品优购">
    <!-- 引入网站favicon图标 -->
    <link rel=" shortcut icon" href="favicon.ico" />
    <!-- 引入初始化css样式 -->
    <link rel="stylesheet" href="css/base2.css">
    <!-- 引入公共css样式 -->
    <link rel="stylesheet" href="css/common2.css">
    <!-- 引入商品详情样式 -->
    <link rel="stylesheet" href="css/detail2.css">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./assets/slick/slick.css">
    <!-- 引入 js 文件 -->
    <script src="./js/detail.js"></script>

    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="ele-2.15.7/index.js"></script>
</head>
<style>

    .shortcut .wrapper ul li:hover a{
        color: #c81623;
    }

    .shortcut .wrapper ul li a {
        font-size: 14px;
        color: #fff;
    }

    .shortcut .wrapper ul li:hover::after{
        color: #c81623;
    }

    /*顶部标签*/
    .nav{
        margin-left: 160px;
        width: 1024px;
    }
    .image {
        width: 100%;
        display: block;
    }

    #top-search{
        height: 26px;
        border: none;
        width: 630px;
        padding: 5px 0px 6px 16px;
        margin-top: 5px;
        margin-left: 3px;

    }

    #from-search{
        height: 37px;
        width: 690px;
        margin-left: 430px;
        margin-top: 20px;
        display: inline-block;
        border-radius: 15px;
        border: 1px solid black;

    }

    #from-search a{
        background: url(images/search.png) no-repeat 5px center;/*5px -->离左边距离  center:上下*/
        background-size: 20px 20px;
        height: 19px;
        display: inline-block;
        padding-bottom: 25px;

    }
    #from-search a span{
        visibility: hidden;
    }
    /*鼠标悬停在a标签上样式的效果*/
    #from-search a:hover{
        background: url(images/search_black.png) no-repeat 6px center;/*5px -->离左边距离  center:上下*/;
        background-size: 20px 20px;
    }
    #header{
        margin-top: 10px;
    }

    .el-row {
        margin-bottom: 20px;
    }
    .el-col {
        border-radius: 4px;
        margin: 8px;
        width: 230px;
        height: 310px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 6px 6px;
        background-color: #f9fafc;
        margin-bottom: 10px;
        height: 310px;
    }
    .el-card__body{
        height: 310px;
    }

    .banner{
        background-color: white;
    }

    .goods{
        margin-top: 50px;
    }

    #reduceButton ,#addButton{
        width: 30px;
        height: 40px;
    }
    #numInput{
        width: 40px;
        height: 40px;
        background-color: #ECECEC;
    }
    .product_intro{
        margin-top: 80px;
    }

    .choose_btns div{
        width: 140px;
        margin-left: 10px;
        float: left;
    }
    .choose_btns{
        width: 300px;
    }

    .summary_stock{
        height: 30px;
    }

    .summary{
        height: 80px;
    }

    .preview_list{
        padding-top: 20px;
    }
    .preview_list ul li{
        margin-right: 10px;
    }
    #bottom-image{
        width: 1200px;
        margin: auto;
    }

    #bottom-product-image{
        border-top: 1px  solid hsla(0,0%,59.2%,.1);
    }

    #bottom-product-image>li {
        width: 600px;
        height: 960px;
        margin: auto;
    }


    #bottom-product-image>li>img {
        width: 600px;
        height: 960px;
    }


</style>
<body>
<!-- 快捷导航栏区域 -->
<div id="app">

    <div class="shortcut" >
        <div class="wrapper">
            <ul>
                <li class="nav1"><a href="#" >我的万宝</a>
                    <!--                <div class="nav2">-->
                    <!--                    <div><a href="#">服务流程</a></div>-->
                    <!--                    <div><a href="#">开店时间</a></div>-->
                    <!--                </div>-->
                </li>
                <li><a :href="'cart/cart.html?uid='+uid" >购物车</a></li>
                <li class="nav3"><a href="#" >商品收藏</a>
                    <!--                <div class="nav4">-->
                    <!--                    <div><a href="#">收藏的宝贝</a></div>-->
                    <!--                    <div><a href="#">收藏的店铺</a></div>-->
                    <!--                </div>-->
                </li>
                <li><a href="#" >商品分类</a></li>
                <li class="nav5"><a href="#" >联系客服</a>
                    <!--                <div class="nav6">-->
                    <!--                    <div><a href="#">消费者客服</a></div>-->
                    <!--                    <div><a href="#">卖家客服</a></div>-->
                    <!--                    <div><a href="#">意见反馈</a></div>-->
                    <!--                </div>-->
                </li>
            </ul>
        </div>
    </div>


    <!-- 头部区域 -->
    <div>
        <from id="from-search">
            <input  type="text" id="top-search">
            <span style="color: #ccc;">|</span>
            <a href="#"><span >搜索</span></a>
        </from>
    </div>


    <div class="nav">
        <span style="float: left;height: 70px;line-height: 70px">商品分类:</span>
        <ul style="float: left">
            <li v-for=" type in typesOption"><a href="#">{{type.tname}}</a></li>
        </ul>
    </div>

    <!-- 主体部分 -->
    <div class="de_container w">

        <!-- 面包屑导航 -->

        <!-- 产品介绍 -->
        <div class="product_intro clearfix" style="clear: both">
            <div class="preview_wrap">
                <div class="preview_img">
<!--                    根据商品id 获取图片-->
                    <img :src="mainImage" alt="封面图片" style="border:1px solid black " id="mainImage">
                    <div class="mask"></div>

                </div>
                <div class="preview_list">
                    <ul class="list_item">
                        <li v-for="image in ImageData"><img :src="image.images" alt="" style="width: 56px; height: 56px;border: 1px solid black;padding-left: 5px; cursor: pointer" :data-prop="image.images"></li>
                    </ul>
                    <a href="#" class="arrow_next"></a>
                </div>

            </div>
            <div class="itemInfo_wrap">
                <div class="sku_name">
                    {{shoppingData.proname}}
                </div>
                <div class="summary">
                    <dl class="summary_price">
                        <dt>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</dt>
                        <dd>
                            <i class="cr">￥{{shoppingData.price}}</i>
                            <!--                            <div class="remark">累计评价<i class="cb">612188</i></div>-->
                        </dd>
                    </dl>


                    <dl class="summary_stock" >
                        <dt>配 送 至</dt>
                        <dd>
                            <p>{{receiverprovince}}</p>
                        </dd>
                    </dl>
                    <br>
                    <br>
                    <dl>
                        <dt style="width: 120px">总金额:{{totalPrice}}元</dt>
                        <dt style="margin-left: 40px">数量</dt>
                            <el-input-number v-model="num" @change="handleChange(num);":min="1" label="描述文字" size="small" ></el-input-number>
                    </dl>
                    <br>
                    <br>
                    <br>

                    <div class="choose_btns">
                        <div ><a :href="'ReceiveMessage.html?proid='+proid +'&uid='+uid+'&num='+num +'&totalPrice='+totalPrice"><button>立即购买</button></a></div>
                        <div ><button @click="addCart">加入购物车</button></div>
                    </div>
                </div>
            </div>
        </div>
     </div>

    <div id="bottom-image">
        <h3>宝贝详情</h3>
        <ul id="bottom-product-image">
            <li v-for=" image in allImage"><img :src="image.images"></li>
        </ul>
    </div>
        <!--        <div class="product_detail clearfix">-->
        <!--            -->
        <!--    </div>-->
        <!-- 底部模块footer -->
    <div class="footer">
        <div class="wrapper">
            <div class="top">
                <ul>
                    <li><span>价格亲民</span></li>
                    <li><span>价格亲民</span></li>
                    <li><span>价格亲民</span></li>
                </ul>
            </div>
            <div class="bottom">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                    <a href="#">关于我们</a>|
                </p>
                <p>CopyRight @ 小兔鲜儿"</p>
            </div>
        </div>
    </div>
</div>
</div>

</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            typesOption : [],
            proid: "",
            mainImage : "",
            ImageData : [],
            allImage : "",
            shoppingData : [],
            receiverprovince : "",
            uid : "",
            num : 1,
            price : 0,
            totalPrice: 0,
        },

        methods: {
            addCart(){
              axios.get("addCartServlet.s",{
                  params : {
                      uid : this.uid,
                      proid : this.proid,
                      num : this.num
                  }
              }).then(res=>{
                    if (res.data.code==1){
                        this.$message(res.data.msg);
                    }else{
                        this.$message(res.data.msg);
                    }
              })
            },
            handleChange(){
              this.totalPrice = this.num*this.price;
            },
            queryType() {
                axios.get("QueryBuyShoppingServlet.s", null).then(res => {
                    this.typesOption = res.data;
                })
            },
            queryData(){
              axios.get("ShoppingMessageServlet.s",{
                  params: {
                      proid :this.proid
                  }
              }).then(res=>{
                  this.shoppingData = res.data;
                  this.price = this.shoppingData.price;
                  //计算总金额
                  this.totalPrice = this.price*this.num;
              })
            },

            queryImageByProid() {
                axios.get("QueryImageByProidServlet.s", {
                    params: {
                        proid: this.proid,
                    }
                }).then(res => {
                    this.mainImage = res.data.mainImage.image;
                    this.ImageData = res.data.images;
                    this.allImage = res.data.allImage;
                })
            },
            getId() {
                var message = location.search.split("?")[1];
                var idMessage = message.split("&");
                var proid = idMessage[0].split("=")[1];
                var uid = idMessage[1].split("=")[1];
                this.proid = proid;
                this.uid = uid;
            },
            getAddress(){
                axios.get("QueryUserAddressServlet.s",{
                    params : {
                        uid : this.uid,
                    }
                }).then(res=>{
                    this.receiverprovince = res.data.receiverprovince;
                })
            },
        },
        created(){
            this.queryType();
            this.getId();
            //获取商品图片
            this.queryImageByProid();
            //获取商品信息
            this.queryData();
            //获取用户地址
            this.getAddress();

        },
    })
</script>

</html>